<template>
  <div>
    <el-dialog :title="status === '3' ? $t('message.cdtd') : '门票退款'" width="800px" :visible.sync="showClose" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-table ref="multipleTable" :data="siteList" :cell-style="handleCellStyle" border fit :header-row-class-name="'table-header'" class="doumee-element-table" @selection-change="handleSelectionChange">
        <el-table-column key="siteId" type="selection" align="center" width="60" :selectable="handleSelectable" />
        <el-table-column align="center" label="门票名称" prop="name" show-overflow-tooltip min-width="120" />
        <el-table-column align="center" :label="$t('message.rq')" prop="date" show-overflow-tooltip min-width="120" />
        <el-table-column align="center" :label="$t('message.time')" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            {{ scope.row.time }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" show-overflow-tooltip prop="status" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status == '0'">未使用</span>
            <span v-if="scope.row.status == '1'">已使用</span>
            <span v-if="scope.row.status == '2'">退票</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.oldprice')" show-overflow-tooltip prop="price" min-width="100" />
        <el-table-column align="center" :label="$t('message.zhj')" show-overflow-tooltip prop="discountPrice" min-width="100">
          <template slot-scope="scope">
            {{
              scope.row.discountPrice ? scope.row.discountPrice : scope.row.price
            }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showClose = false">{{ $t("message.qx") }}</el-button>
        <el-button :loading="loading" type="primary" @click="closeBtn">{{ $t("message.qr") }}</el-button>
        <!-- <el-button :loading="loading" type="primary" @click="closeBtns">{{ $t("message.cdtd") }}</el-button> -->
      </div>
    </el-dialog>
    <el-dialog :title="$t('message.tdxq')" width="700px" :visible.sync="showTd" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-table ref="table" :data="siteIds" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
        <el-table-column align="center" :label="$t('message.cd')" prop="name" show-overflow-tooltip min-width="120" />
        <el-table-column align="center" :label="$t('message.rq')" prop="date" show-overflow-tooltip min-width="120" />
        <el-table-column align="center" :label="$t('message.time')" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            {{ scope.row.beginTime + "-" + scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('message.oldprice')" show-overflow-tooltip prop="price" min-width="100" />
        <el-table-column align="center" :label="$t('message.zhj')" show-overflow-tooltip prop="discountPrice" min-width="100">
          <template slot-scope="scope">
            {{
              scope.row.discountPrice ? scope.row.discountPrice : scope.row.price
            }}
          </template>
        </el-table-column>
      </el-table>
      <div class="gjCnt">
        {{ $t("message.tkje") }}：
        <el-input v-if="modPrice" v-model="modPValue" maxlength="10" clearable oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');" :placeholder="$t('message.qsr')" />
        <el-input v-if="!modPrice" v-model="allPrice" disabled />
        {{ $t("message.yuan") }}
        <el-checkbox v-if="canMod" v-model="modPrice" style="margin-left: 10px">{{ $t("message.gaijia") }}</el-checkbox>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTd = false">{{ $t("message.qx") }}</el-button>
        <el-button :loading="loading" type="primary" @click="closeBtn">{{
          $t("message.qr")
        }}</el-button>
      </div>
    </el-dialog>
    <RefundTem v-if="print" ref="RefundTemRef" />
  </div>
</template>
<script>
import {
  partCancelPrice, printOrder, configList, bcCancel
} from '@/api'
import store from '@/store'
import RefundTem from '@/components/printTem/refund.vue'
export default {
  components: {
    RefundTem
  },
  data () {
    return {
      print: false,
      modalDialog: store.getters.dialog,
      showClose: false, // 弹窗
      siteList: [],
      siteIds: [],
      loading: false,
      showTd: false,
      orderId: '',
      canMod: false,
      modPrice: false,
      modPValue: '',
      allPrice: '',
      status: ''
    }
  },
  created () {
    this.getDefalutConfig()
  },
  methods: {
    handleSelectionChange (val) {
      this.siteIds = val
    },
    handleSelectable (row) {
      return row.status !== '2' && row.status !== '1';
    },
    handleCellStyle ({ row, column, rowIndex, columnIndex }) {
      if (row.status == '2' || row.status == '1') {
        return {
          color: 'gray',
          backgroundColor: '#f5f5f5',
          cursor: 'not-allowed'
        };
      }
      return {};
    },
    cancelBtn (e, siteIds) {
      //   console.log(e, '444444444444')
      this.showClose = true
      //   this.orderId = e.orderId
      //   this.siteIds = siteIds || []
      //   this.status = e.status
      this.siteList = e

      this.$nextTick(() => {
        if (this.siteList.length > 0) {
          this.siteList.forEach((row) => {
            if (row.status == '2' || row.status == '1') {
              //   this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          });
        }
      })
    },
    getDefalutConfig () {
      configList({ param: { type: '6' } })
        .then((res) => {
          if (res.errorCode !== '000000') return
          const valueListb = res.recordList
          const obj = valueListb.find(item => item.code === 'EDIT_PRICE_CONFIG')
          if (obj && obj.name) {
            this.canMod = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 确认按钮
    closeBtn () {
      //   console.log(this.siteIds, '444')
      const that = this
      let siteIds = [...this.siteIds]
      //   siteIds = siteIds.map((item) => { return item.id })
      siteIds = siteIds
        .filter(item => item.status == 0)  // 先筛选出 status 为 0 的元素
        .map(item => item.id);              // 再提取这些元素的 id
      //   console.log(siteIds, '44499')
      if (siteIds.length == 0) {
        this.$message.info('暂无可退款订单')
        return
      }
      let refundMoney = ''
      let str = this.$t('message.qrqxydtc')

      if (this.siteIds && this.siteIds.length > 0) {
        this.$confirm('是否确认退款?', this.$t('message.ts'), {
          confirmButtonText: this.$t('message.qd'),
          cancelButtonText: this.$t('message.qx'),
          type: 'warning',
          callback: () => { },
          beforeClose: (action, ctx, close) => {
            if (action !== 'confirm') {
              close()
              return
            }
            ctx.confirmButtonLoading = true
            bcCancel({ param: { ids: siteIds, } }).then((res) => {
              ctx.confirmButtonLoading = false
              close()
              if (res.errorCode === '000000') {
                that.$message.success('操作成功')
                that.showClose = false
                that.showTd = false
                if (res.record) {
                  that.printOrder(that.orderId, res.record)
                }
                that.$emit('closeSccess')
              }
            })
              .catch(() => { ctx.confirmButtonLoading = false })
          }
        }).finally(() => { })
      } else {
        this.$message.info('请选择订单')
      }
    },
    printOrder (id, refundOrderId) {
      const venueId = sessionStorage.getItem('venueId')
      let that = this
      printOrder({
        param: {
          venueId,
          templateCode: refundOrderId ? 'SITE_REFUND_TPML' : 'SITETPML',
          workId: id,
          refundOrderId
        }
      })
        .then(res => {
          if (res.errorCode === '000000') {
            if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
              res.record.dataList.forEach(item => {
                this.print = true
                this.$nextTick(() => {
                  that.$refs.RefundTemRef.obj = { ...item, header: that.$t('message.tkd') }
                  setTimeout(() => {
                    that.$refs.RefundTemRef.print()
                  }, 300)
                  setTimeout(() => {
                    that.print = false
                  }, 500)
                })
              })
            } else {
              this.print = false
            }
          } else {
            this.print = false
          }
        }).catch(() => {
          this.print = false
        })
    },
    closeBtns () {

      const that = this
      if (this.siteIds && this.siteIds.length > 0) {
        let siteIds = [...this.siteIds]
        siteIds = siteIds.map((item) => { return item.siteId })
        partCancelPrice({ param: { orderId: that.orderId, siteIds } })
          .then(res => {
            if (res.errorCode === '000000') {
              that.showClose = false
              that.modPrice = false
              that.modPValue = ''
              that.allPrice = res.record.discountPrice
              that.showTd = true
              that.$emit('closeSccess')
            }
          })
      } else {
        this.$message.info('请选择订单')
        // this.$message.info(this.$t('message.qxzcc'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.gjCnt {
  font-size: 14px;
  margin-top: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;

  .el-input {
    width: 100px;
    margin: 0 5px;
  }
}
</style>
